<template>
    <div class="button-container code-page-container">
        <div class="title">Button 按钮</div>
        <div class="code-content">
            <div class="left-content">
                <CodeBox>
                    <template #title>语法糖</template>
                    <template #description>
                        通过 type
                    </template>
                    <Color></Color>
                </CodeBox>
                <CodeBox>
                    <template #title>语法糖</template>
                    <template #description>
                        通过 type
                    </template>
                    <Size></Size>
                </CodeBox>
                <CodeBox>
                    <template #title>语法糖</template>
                    <template #description>
                        通过 type
                    </template>
                    <Disabled></Disabled>
                </CodeBox>
            </div>
            <div class="right-content">
                <CodeBox>
                    <template #title>语法糖</template>
                    <template #description>
                        通过 type
                    </template>
                    <Type></Type>
                </CodeBox>
                <CodeBox>
                    <template #title>语法糖</template>
                    <template #description>
                        通过 type
                    </template>
                    <Shape></Shape>
                </CodeBox>
                <CodeBox>
                    <template #title>语法糖</template>
                    <template #description>
                        通过 type
                    </template>
                    <Loading></Loading>
                </CodeBox>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import CodeBox from '../../../components/project/CodeBox.vue';
import Color from './demo/Color.vue';
import Size from './demo/Size.vue';
import Type from './demo/Type.vue';
import Loading from './demo/Loading.vue';
import Shape from './demo/Shape.vue';
import Disabled from './demo/Disabled.vue';
</script>

<style lang="scss" scoped>
.code-content {
    @include flex.display-flex;
    // flex-direction: column;
    width: 100%;
    gap: 10px;
    height: 100%;

    > div {
        flex: 1;
        @include flex.display-flex;
        flex-direction: column;
        gap: 10px;
    }

    .code-box-container {
        width: 100%;
    }
}
</style>
